{% extends 'index/layout.html' %}
{% load static %}

{% block css %}
    <style>
        #imageModal {
            margin-top: 90px;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            overflow: auto; /* 允许模态框内滚动 */
            text-align: center; /* 居中文本 */
            vertical-align: middle; /* 垂直居中 */
        }

        #modalContent {
            width: 80%;
            max-width: 1200px; /* 设置模态框最大宽度 */
        }

        #modalImage {
            width: 100%;
            height: auto;
            max-height: 100%; /* 限制图片最大高度 */
            object-fit: contain;
        }

        .smaller-image {
            max-width: 70%; /* 缩小30% */
            max-height: 70%; /* 缩小30% */
        }


        .video-container video {
            max-width: 50%;
            max-height: 40%;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .img {
            width: 100%; /* 设置宽度为百分之百，自适应宽度 */
            height: 100px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
            margin-bottom: 10px; /* 设置图像之间的垂直间距 */
        }

        .video {
            width: 500px; /* 设置宽度为百分之百，自适应宽度 */
            height: 100px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
        }
    </style>
{% endblock %}

{% block content %}
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="{% url 'home' %}">首页</a>
            <a>
              <cite>管理员</cite></a>
          </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="" style="height: 100%">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12  layui-col-xs12 layui-col-sm12">
                <div class="layui-card" style="height: 100%">
                    <div class="layui-card-body">
                        <form class="layui-form layui-col-space5">
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" id="deleteButton"><i class="layui-icon"></i>批量删除
                        </button>
                        <button class="layui-btn" onclick="xadmin.open('添加','/user/add/',800,600)"><i
                                class="layui-icon"></i>添加
                        </button>
                        {% for n in nums %}
                            <button class="layui-btn layui-btn-normal" onclick="go_list({{ n }})">第{{ n }}栏目
                            </button>
                        {% endfor %}


                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="checkAll" lay-skin="primary" lay-filter="checkAll">
                                </th>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>创建时间</th>
                                <th>重置密码</th>
                                <th>操作</th>
                            </thead>
                            <tbody>
                            {% for cont in contents %}
                                <tr data-id="{{ cont.id }}">
                                    <td>
                                        <input class="delete_form" type="checkbox" name="delete"
                                               value="{{ cont.id }}"
                                               lay-skin="primary">
                                    </td>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ cont.username }}</td>
                                    <td>{{ cont.create_date|date:'Y-m-d H:i:s' }}</td>
                                    <td class="td-status"><span title="重置密码"
                                                                class="layui-btn layui-btn-normal layui-btn-mini"
                                                                onclick="xadmin.open('重置密码','/user/reset/{{ cont.id }}/' , 800 , 600)">重置密码</span>
                                    </td>
                                    <td class="td-manage">
                                        <a title="编辑"
                                           onclick="xadmin.open('编辑','/user/edit/{{ cont.id }}/' , 800 , 600)"
                                           href="javascript:;">
                                            <i class="layui-icon">&#xe642;</i>
                                        </a>
                                        <a title="删除"
                                           onclick="member_del(this,{{ cont.id }})"
                                           href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i>
                                        </a>
                                    </td>
                                </tr>

                            {% endfor %}


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="imageModal">
            <div id="modalContent">
                <img id="modalImage" src="" alt="Enlarged Image">
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            var form = layui.form;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
            // 监听全选复选框的点击事件
            form.on('checkbox(checkAll)', function (data) {
                // 获取全选复选框的状态
                var isChecked = data.elem.checked;

                // 设置所有 name="delete" 的复选框的状态为全选复选框的状态
                $('input[name="delete"]').prop('checked', isChecked);
                // 重新渲染 layui 的表单
                form.render('checkbox');
            });

            // 监听 name="delete" 复选框的点击事件
            form.on('checkbox(delete)', function (data) {
                // 获取所有 name="delete" 复选框的数量
                var totalCheckboxCount = $('input[name="delete"]').length;
                // 获取选中的 name="delete" 复选框的数量
                var checkedCheckboxCount = $('input[name="delete"]:checked').length;

                // 如果所有 name="delete" 复选框都被选中，则设置全选复选框为选中状态，否则设置为未选中状态
                $('#checkAll').prop('checked', totalCheckboxCount === checkedCheckboxCount);
                // 重新渲染 layui 的表单
                form.render('checkbox');
            });
            // 监听删除按钮的点击事件
            $('#deleteButton').on('click', function () {
                layer.confirm('确定删除？', function () {
                    // 获取选中的复选框的值
                    var selectedIds = [];
                    $('.delete_form:checked').each(function () {
                        selectedIds.push($(this).val());
                    });
                    // 发送 AJAX 请求到后端
                    $.ajax({
                        type: 'POST',
                        url: '/user/delete_all/',  // 替换为实际的后端处理URL
                        data: {selected_ids: selectedIds},
                        success: function (response) {
                            layer.msg('删除成功', {'icon': 1});
                            selectedIds.forEach(function (id) {
                                // 使用 attribute 选择器选中具有相应值的行，并删除
                                $('tr[data-id="' + id + '"]').remove();
                            });
                        },
                        error: function (error) {
                            layer.msg('删除失败', {'icon': 5})
                            // 处理错误后的操作
                        }
                    });
                });
            })
        });

        /*用户-删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                $.ajax({
                    url: '/user/delete/',  // 替换为你的服务器端上传端点
                    type: 'POST',
                    data: {
                        'index_id': id
                    },
                    success: function (response) {
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    },
                    error: function (response) {
                        console.error('删除失败:', response.status);
                        layer.msg('删除失败', {icon: 5});
                    }
                });

            });
        }

        function go_list(id) {
            location.href = '/index/list/' + id + '/';
        }

    </script>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>

    <script>
        function OpenDialog(url, w, h) {
            var iTop2 = (window.screen.availHeight - 20 - h) / 2;
            var iLeft2 = (window.screen.availWidth - 10 - w) / 2;
            var params = 'menubar:no;dialogHeight=' + h + 'px;dialogWidth=' + w + 'px;dialogLeft=' + iLeft2 + 'px;dialogTop=' + iTop2 + 'px;resizable=yes;scrollbars=0;resizeable=0;center=yes;location:no;status:no'
            var addDiv = $("<div id = 'tempDiv' style='left:0px;top:0px;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.4)!important;filter:alpha(opacity = 40);background:#000;z-index:1000;'></div>");
            $(document.body).append(addDiv); //添加一个蒙板作背景
            window.open(url, addDiv, params);
        }
    </script>
{% endblock %}
